<template>
	<div class="flex-col">
		<el-image
			:src="modelValueType ? modelValue[0]?.downloadUrl : modelValue"
			fit="cover"
			:preview-src-list="modelValueType ? modelValue.map((item) => item.downloadUrl) : [modelValue]"
		>
			<template #error>
				<div style="width: 200px; height: 80px" class="flex-center">
					<my-icon icon="Picture" size="30" />
				</div>
			</template>
		</el-image>

		<el-button @click="signatureShow = true" class="m-t-10" v-if="!(props.disabled || elForm?.disabled)"> 签名 </el-button>

		<el-dialog
			v-model="signatureShow"
			title="签字板"
			:width="`${width + 30}px`"
			@open="init"
			append-to-body
			draggable
			class="MySignature"
			v-bind="$attrs"
		>
			<canvas v-bind="{ height, width }" ref="refCanvas" />
			<template #footer>
				<el-button @click="clearFn">重新签名</el-button>
				<el-button type="primary" @click="submitFn">确认签名</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="MySignature">
/**
 * 签名组件
 * @module components/my-signature
 * 使用demo
 * <!-- 签名组件 -->
 * <my-signature v-model="signatureList"/>
 */
import { rdfileDataUpload } from '@a/public';
import { base64ToFile } from '@u/download';
import SignaturePad from 'signature_pad';
import { formContextKey as elFormKey, formItemContextKey as elFormItemKey } from 'element-plus';

const elForm = inject(elFormKey, {}),
	elFormItem = inject(elFormItemKey, {}),
	$emits = defineEmits(['update:modelValue']),
	signatureShow = ref(false);

/***
 * 参数属性
 * @property {Array}  签名的图片数组
 * @property {Number} [height = 200] 签字版的高度
 * @property {Number} [width = 470] 签字版的宽度
 * @property {Object} signatureObj SignaturePad的配置属性
 */
const props = defineProps({
	modelValue: {
		type: [Array, String],
		default: () => []
	},
	height: {
		type: Number,
		default: 400
	},
	width: {
		type: Number,
		default: 940
	},
	signatureObj: {
		type: Object,
		default: () => ({ backgroundColor: '#b1b3b8' })
	},
	disabled: {
		type: Boolean,
		default: false
	}
});

watch(
	() => props.modelValue,
	() => {
		signatureShow.value = false;
	}
);

const modelValueType = Array.isArray(props.modelValue);

let signature;
const refCanvas = shallowRef(null);
function init() {
	nextTick(() => {
		if (refCanvas.value) signature = new SignaturePad(refCanvas.value, props.signatureObj);
	});
}

// 清除画板
function clearFn() {
	signature.clear();
}

// 确认画板
function submitFn() {
	const formdata = new FormData();
	formdata.append('file', base64ToFile(signature.toDataURL('image/png')));
	rdfileDataUpload(formdata)
		.then((res) => {
			if (res?.data) {
				signatureShow.value = false;
				$emits(
					'update:modelValue',
					modelValueType
						? [
								{
									id: res.data.id,
									downloadUrl: res.data.downloadUrl,
									fileName: res.data.fileName.split('.')[0],
									fileSizeFormat: res.data.fileSizeFormat,
									fileSize: res.data.fileSize
								}
							]
						: res.data.downloadUrl
				);
				elForm.validateField(elFormItem.prop);
				signature.clear();
				msgSuccess('保存成功！');
			}
		})
		.catch(() => {
			msgError('保存失败');
		});
}
</script>

<style lang="scss" scoped>
:deep(.MySignature .el-dialog__body) {
	padding: 0 !important;
}
</style>
